.products-template {


    .product-list {
        width: 100%;
        margin-top: 15px;
        padding-left: 15px;
        overflow: hidden;
        @include flex_layout(row, space-between, flex-start);
        flex-wrap: wrap;
        
        .not-use {
            width: 200px;
            height: 0px;
            margin-right: 15px;
        }
        
        .product-item {
            width: 200px;
            padding: 25px 15px;
            margin-top: 15px;
            margin-right: 15px;
            background-color: $bg2;
            @include flex_layout(column, center, center);

            .product-img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                overflow: hidden;
            }

            .product-name {
                font-size: $fzsl;
                color: $cor0;
                text-align: center;
                margin-top: 10px;
            }
            
            .user-num {
                margin-top: 20px;
                width: 100%;
                font-size: $fzn;
                color: $cor7;
                text-align: center;
                @include flex_layout(row, flex-start, flex-start);

                .item-num {
                    flex: 1;
                    
                    .name {
                        margin-bottom: 10px;
                    }

                    .num {
                        color: $cor0;
                    }
                }
            }

            .detail-btn {
                margin-top: 25px;
                width: 120px;
                line-height: 32px;
                border: 1px solid $bc4;
                color: $cor8;
                text-align: center;
                font-size: $fzn;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                cursor: pointer;

                &:hover {
                    background: $bg7;
                    color: $cor0;
                }
            }
        }
    }
}